<template>
  <div class="dashboard-wrapper">
    <div class="dashhoard-top">
      <el-form :inline="true" :model="search">
        <el-form-item label="姓名">
          <el-input v-model="search.username" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="search.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="入院时间">
          <el-date-picker v-model="search.startDate" type="date" placeholder="请选择入院日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="出院时间">
          <el-date-picker v-model="search.endDate" type="date" placeholder="请选择出院日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="success" @click="clickExport">导出</el-button>
          <el-button type="primary" @click="getDialog">导入</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--导入-->
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      append-to-body
      width="600px"
      @close="onClose"
    >
      <el-upload
        ref="upload"
        multiple
        :action="fileUploadApi"
        :auto-upload="false"
        :before-upload="beforeAvatarUpload"
        :before-remove="handleBeforeRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :file-list="fileList"
      >
        <el-button size="small" type="success">选取文件</el-button>
        <div class="el-upload__tip">只能上传xls/xlsx文件</div>
      </el-upload>
      <!-- <el-dialog :append-to-body="true" :visible.sync="dialogVisible"></el-dialog> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
    <div class="table-wrapper">
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" max-height="550">
        <el-table-column prop="name" align="center" label="名称" fixed />
        <el-table-column prop="idCard" align="center" label="身份证号" width="160" />
        <el-table-column prop="staffTypeId" align="center" label="员工类型(在职或退休)" width="160" />
        <el-table-column prop="gender" align="center" label="性别" width="50" />
        <el-table-column prop="hospitalName" align="center" label="医院名称" width="150" />
        <!-- <el-table-column prop="hospitalCode" align="center" label="医院编码" width="100" /> -->
        <el-table-column prop="medicalTypeId" align="center" label="就诊类型（住院或门诊大病）" width="204" />
        <!-- <el-table-column prop="billNum" align="center" label="账单号码" width="175" /> -->
        <!-- <el-table-column prop="billDate" align="center" label="账单日期" width="140" /> -->
        <el-table-column prop="inHospitalDate" align="center" label="入院日期" width="140" />
        <el-table-column prop="outHospitalDate" align="center" label="出院日期" width="140" />
        <el-table-column prop="compensationAmount" align="center" label="赔付金额(元)" width="140" />
        <el-table-column prop="totalCost" align="center" label="费用总额(元)" width="120" />
        <!-- <el-table-column prop="payLine" align="center" label="起付线(元)" width="100" /> -->
        <el-table-column prop="overallPayment" align="center" label="统筹支付(元)" width="120" />
        <el-table-column prop="overallSelfPay" align="center" label="统筹自付(元)" width="120" />
        <!-- <el-table-column prop="largeRescuePayment" align="center" label="大额救助支付(元)" width="130" /> -->
        <!-- <el-table-column prop="largeRescueSelfPay" align="center" label="大额救助自付(元)" width="130" /> -->
        <!-- <el-table-column prop="diseaseDiagnosis" align="center" label="疾病诊断" width="140" /> -->
        <!-- <el-table-column prop="diseaseCode" align="center" label="疾病编码" width="100" /> -->
        <!-- <el-table-column prop="happenDate" align="center" label="发生日期" width="130" /> -->
        <el-table-column
          prop="actualCompensationAmount"
          align="center"
          label="实赔金额(元)"
          width="120"
        />
        <!-- <el-table-column prop="medicalSigns" align="center" label="医疗标志" width="100" /> -->
        <!-- <el-table-column
          prop="paymentResponsibilityCode"
          align="center"
          label="赔付责任编码"
          width="110"
        /> -->
        <!-- <el-table-column prop="bankCode" align="center" label="银行编码" width="100" /> -->
        <el-table-column prop="bankName" align="center" label="银行名称" width="130" />
        <el-table-column prop="accountName" align="center" label="账户名称" width="80" />
        <el-table-column prop="accountNumber" align="center" label="账号" width="150" />
        <!-- <el-table-column
          prop="paymentResponsibilityType"
          align="center"
          label="给付责任类型"
          width="120"
        /> -->
        <!-- <el-table-column prop="customerNumber" align="center" label="客户号" width="100" /> -->
        <!-- <el-table-column prop="hospitalizationNumber" align="center" label="住院号" width="120" /> -->
        <el-table-column prop="handlingTime" align="center" label="经办时间" width="130" />
        <el-table-column prop="phoneNumber" align="center" label="手机号" width="120" />
        <!-- <el-table-column prop="unreasonableCost" align="center" label="不合理费用(元)" width="120" /> -->
        <!-- <el-table-column prop="reimbursableAmount" align="center" label="可报销范围内金额(元)" width="160" /> -->
        <!-- <el-table-column prop="deductDetails" align="center" label="扣除明细(元)" width="110" /> -->
        <!-- <el-table-column prop="relationship" align="center" label="领款人和被保人关系" width="150" /> -->
        <!-- <el-table-column prop="happenProvince" align="center" label="发生地点省" width="110" /> -->
        <!-- <el-table-column prop="happenCity" align="center" label="发生地点市" width="110" /> -->
        <!-- <el-table-column prop="happenArea" align="center" label="发生地点县" width="110" /> -->
        <!-- <el-table-column prop="medicalInsuranceType" align="center" label="医保类型" width="80" /> -->
        <!-- <el-table-column prop="endClaim" align="center" label="理赔终止" width="120" /> -->
        <!-- <el-table-column prop="eventType" align="center" label="事件类型" width="100" /> -->
        <!-- <el-table-column prop="payeeCertificateType" align="center" label="领款人证件类型" width="120" /> -->
        <!-- <el-table-column prop="payeeCertificateNum" align="center" label="领款人证件号码" width="140" /> -->
        <!-- <el-table-column prop="tumorMorphologyCode" align="center" label="肿瘤形态学代码" width="120" /> -->
        <!-- <el-table-column prop="tumorMorphologyName" align="center" label="肿瘤形态学名称" width="120" /> -->
        <!-- <el-table-column prop="accidentCode" align="center" label="意外代码" width="100" /> -->
        <!-- <el-table-column prop="accidentName" align="center" label="意外名称" width="110" /> -->
        <!-- <el-table-column
          prop="authorizedUseCustomerInformation"
          align="center"
          label="授权使用客户信息"
          width="140"
        /> -->
        <!-- <el-table-column
          prop="overallMedicalSettlementNum"
          align="center"
          label="医疗统筹结算号"
          width="130"
        /> -->
        <!-- <el-table-column prop="inMedicalCost" align="center" label="医保统筹内费用(元)" width="150" /> -->
        <!-- <el-table-column
          prop="medicalReimbursementCost"
          align="center"
          label="医保报销费用(元)"
          width="140"
        /> -->
        <el-table-column prop="YiFirstCost" align="center" label="乙类首先自付费用(元)" width="160" />
        <!-- <el-table-column prop="informationImportDate" align="center" label="信息导入日期" width="120" /> -->
        <el-table-column prop="closeDate" align="center" label="结案日期" width="140" />
        <el-table-column prop="compensationResult" align="center" label="赔付结论" width="120" />
        <el-table-column prop="policyNumber" align="center" label="保单号" width="120" />
      </el-table>
      <!-- <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change="clickCurrent"
      ></el-pagination>-->
    </div>
  </div>
</template>

<script>
import { getClaimDetails, detailsOutExcel } from "@/api/claim"
import { mapGetters } from 'vuex'
// eslint-disable-next-line
/* eslint-disable */
export default {
  name: "claimDetail",
  data() {
    return {
      loading: false,
      dialog: false,
      dialogVisible: false,
      fileList: [],
      search: {
        username: "",
        idCard: "",
        startDate: "",
        endDate: ""
      },
      tableData: []
    };
  },
  computed: {
    ...mapGetters([
      'fileUploadApi'
    ])
  },
  methods: {
    onSearch() {
      this.loading = true;
      let user = Boolean(this.search.username && this.search.idCard);
      let card = !this.search.username && !this.search.idCard;
      if (user || card) {
        getClaimDetails({
          name: this.search.username,
          idCard: this.search.idCard,
          inHospitalDate: this.search.startDate,
          outHospitalDate: this.search.endDate
        }).then(res => {
          if (res.code === 40000) {
            this.tableData = res.data.dataList;
            this.loading = false;
            this.tableData.map(item => {
              if (item.gender == 0) {
                item.gender = "女";
              } else {
                item.gender = "男";
              }
              if (item.medicalTypeId == 2) {
                item.medicalTypeId = "住院";
              } else {
                item.medicalTypeId = "门诊大病";
              }
              if (item.staffTypeId == 2) {
                item.staffTypeId = "在职";
              } else {
                item.staffTypeId = "退休";
              }
              item.inHospitalDate = item.inHospitalDate.slice(0,10)
              item.outHospitalDate = item.outHospitalDate.slice(0,10)
              item.closeDate = item.closeDate.slice(0,10)
            });
          }
        });
      } else {
        this.$message({
          message: "姓名和身份证号必须同时为空或不为空！",
          center: true,
          type: "warning",
          showClose: true,
          duration: 1 * 1000
        });
      }
    },
    clickExport() {
      detailsOutExcel({
        name: this.search.username,
        idCard: this.search.idCard,
        inHospitalDate: this.search.startDate,
        outHospitalDate: this.search.endDate
      }).then(res => {
        let blob = new Blob([res], { type: "application/vnd.ms-excel" });
        const fileName = "明细表格.xls";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const link = document.createElement("a");
          link.download = fileName;
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(link.href); // 释放URL 对象
          document.body.removeChild(link);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    getDialog() {
      this.dialog = true;
    },
    beforeAvatarUpload(file) {
      let Xls = file.name.split(".");
      if (Xls[1] === "xls" || Xls[1] === "xlsx") {
        return file;
      } else {
        this.$message.error("上传文件只能是 xls/xlsx 格式!");
        return false;
      }
    },
    handleSuccess(response, file, fileList) {
      console.log(file.name, "1111");
      console.log(response)
      this.dialog = false;
    },
    handleBeforeRemove(file, fileList) {
      console.log(file.name);
    },
    // 刷新列表数据
    doSubmit() {
      this.$refs.upload.submit();
      // this.dialog = false;
    },
    onClose() {
      this.fileList = [];
      this.dialog = false;
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message);
      this.$notify({
        title: msg.message,
        type: "error",
        duration: 2500
      });
    }
  },
  created() {
    this.onSearch();
  }
};
</script>

<style lang="scss" scoped>
.table-wrapper {
  margin: 20px;
  /deep/ .el-table--scrollable-x .el-table__body-wrapper {
    border-top: 1px solid #efefef;
  }
  /deep/ .el-table__fixed-body-wrapper {
    border-top: 1px solid #efefef;
  }
}
.input {
  width: 240px;
}
.dashhoard-top {
  margin-top: 20px;
  margin-left: 20px;
}
.el-upload__tip {
  margin-left: 35px;
  font-size: 13px;
  color: #999999;
}
</style>
